<template>
  <view class="container-gray">
    <view v-if="violationList.length>0">
      <view
        class="violation-box"
        v-for="(item,index) in violationList"
        :key="index"
        @click="selectDetail(item.id)"
      >
        <view class="flex-box">
          <view class="title">{{item.reason}}</view>
          <view class="time">{{item.breakRuleTime}}</view>
        </view>
        <view class="brief">-{{item.breakRule}}</view>
      </view>
    </view>
    <view v-else class="no-record">暂无违章记录</view>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'

export default {
  data() {
    return {
      violationList: [],
      page: 1
    }
  },
  onShow() {
    this.getViolationList()
  },
  onReachBottom() {
    this.getViolationList()
  },
  methods: {
    // 获取用户三违记录
    async getViolationList() {
      const params = {
        userId: uni.getStorageSync('userId')
      }
      let res = await post_md5('/breakrule-app/breakrule/list', params)
      this.violationList = res.data
    },

    // 查看三违详情
    selectDetail(id) {
      uni.navigateTo({
        url: 'violation-detail?id=' + id
      })
    }
  }
}
</script>

<style>
.violation-box {
  background: #ffffff;
  padding: 40upx;
  margin-top: 1px;
  overflow: hidden;
}

.title {
  font-size: 30upx;
  font-weight: bold;
  color: #333333;
  width: calc(100% - 200upx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time {
  font-size: 24upx;
  color: #999999;
}

.brief {
  font-size: 30upx;
  color: #333333;
  margin-top: 20upx;
}

.no-record {
  color: #999999;
  font-size: 30upx;
  margin-top: 100upx;
  text-align: center;
}
</style>
